<template>

  <div class="affix-container">
    <el-affix :class="{'opacity-50': this.currentScroll>75}"
              class="ml-3.5 mb-3  hover:opacity-100 transition-opacity duration-300" target=".affix-container"
              :offset="10">
      <el-row :gutter="25">
        <el-col :span="5">
          <el-input v-model="this.score"></el-input>
        </el-col>
        <el-col :span="9">
          <el-button @click="setScore" type="primary">打分</el-button>
        </el-col>
        <el-col :span="10">
          <el-select @change="changeFile" v-model="fileSeled">
            <el-option
                v-for="item in fileSelect"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
    </el-affix>

    <iframe
        id="ifm"
        class="w-full"
        :src="'/preview/onlinePreview?url='+url">

    </iframe>
  </div>


</template>
<script>

</script>

<script>

import {Base64} from "js-base64";
import axios from "axios";
import {ElMessage} from "element-plus";
export default {
  name: "pre_view_homework",
  data() {
    return {
      currentScroll: 0,
      fileSelect: [],
      fileSeled: "",
      url: "",
      score: 0,
      pageData:{}
    }
  },
  methods: {
    setScore(){
      axios.post('/api/teacher/SetScore',{score:this.score,Id:this.pageData.id}).then((res)=>{
        if (res.status===200){
          ElMessage.success(
              {
                message:"成功"
              })
        }
      })
    },
    changeFile() {
      if (this.fileSeled.endsWith(".jpg")||this.fileSeled.endsWith(".png")){
        this.url = encodeURIComponent(Base64.encode('http://localhost/previewPic/homework/' + this.fileSeled))
      }else {
        // this.url = encodeURIComponent(Base64.encode('http://82.156.206.110:4102/homework/' + this.fileSeled))
        this.url = encodeURIComponent(Base64.encode('http://zjx_minio:9000/homework/' + this.fileSeled))
      }
    },
    handleScroll() {
      this.currentScroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    }
  },
  created() {
    // this.fileList = this.$ses.getSesWithParse(this.$route.query.resId).fileList
    this.pageData = this.$ses.getSesWithParse(this.$route.query.resId)
    for (const argument of this.pageData.fileList) {
      this.fileSelect.push({
        label: argument.split("_zjx_")[1],
        value: argument
      })
    }
    this.score = this.pageData.score
    this.fileSeled = this.fileSelect[0].value
    // this.url = encodeURIComponent(Base64.encode('http://82.156.206.110:4102/homework/' + this.fileSeled))
    this.url = encodeURIComponent(Base64.encode('http://zjx_minio:9000/homework/' + this.fileSeled))
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true);
    document.getElementById('ifm').onload = function () {
      document.getElementById('ifm').height = document.getElementById('ifm').contentWindow.document.documentElement.scrollHeight
      document.getElementById('ifm')//获取到iframe
          .contentWindow//获取到iframe的window
          .document//获取到iframe的document
          .getElementsByClassName('panel-heading')[0]//正常获取元素
          .style.display = "none";//修改样式

      document.getElementById('ifm')//获取到iframe
          .contentWindow//获取到iframe的window
          .document//获取到iframe的document
          .getElementsByClassName('panel')[0]//正常获取元素
          .style.marginTop = "15px";//修改样式
    };
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll, true);
  }
}
</script>

<style>
#preview .panel-heading {
  display: none;
}
</style>